<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>htmlcss 阶段</title>
    <style>
        body {
            margin: 0;
        }

        .layout {
            width: 1200px;
            height: 300px;
            background-color: #ccc;
            margin: 0 auto;
        }

        .layout>div {
            float: left;
            width: 600px;
            height: 300px;
            box-sizing: border-box;
            padding: 20px;
        }

        .left {
            border-right: 2px dashed #333;
        }

        .right {
            border-left: 2px dashed #333;
        }

        .layout>div span {
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #f0f0f0;
            border-radius: 50%;
            color: #f0f0f0;
        }

        .left span {
            background-color: deepskyblue;
        }

        .left span.active {
            background-color: red;
        }

        .right span {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 
       <div class="layout">
                <div class="left">
                    <span>0</span>
                </div>
                <div class="right">
                    <span>0</span>
                </div>
        </div> 
    -->

    <script>
        // 要求：
            // 现有一份数据 data , 记录数字 1 ~ 33 ; 
            // 可以复制一份新数据 newData
            // 通过输入弹窗（prompt）输入数字，记录输入的索引值和数量,在新数据里面取出指定的数据数组
            // 把从新数据从获取的数据数组渲染在页面.right标签区域
            // 把原数组数据渲染在.left 标签区域 ，同时被输入选中的数字，背景色为红色。
            // 如图所示

        // 数据
        var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33];

        var newData = [];


    </script>
</body>

</html>